import { NavBar, DatePicker } from 'antd-mobile'
import { useState, useMemo, useEffect } from 'react'
import { useSelector } from 'react-redux'
import classNames from 'classnames'
import dayjs from 'dayjs'
import _ from 'lodash'
import DailyBill from './component/day-bill'
import './index.scss'

export default function Month() {
  // 按月做数据的分组
  const billList = useSelector((state) => state.bill.billList)
  const monthGroup = useMemo(() => {
    // return 计算之后的值
    return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY-MM'))
  }, [billList])

  // 时间选择框处理逻辑
  const [dateVisible, setDateVisible] = useState(false)
  const [currentDate, setCurrentDate] = useState(() => {
    // 进行时间格式化
    return dayjs(new Date()).format('YYYY-MM')
  })
  const [currentMonthList, setCurrentMonthList] = useState([])
  const onConfirm = (date) => {
    setDateVisible(false)
    const formatDate = dayjs(date).format('YYYY-MM')
    setCurrentDate(formatDate)
    // 判空操作，如果没有数据，清空列表
    monthGroup[formatDate] ? setCurrentMonthList(monthGroup[formatDate]) : setCurrentMonthList([])
  }

  // 支出 收入 结余
  const monthResult = useMemo(() => {
    const pay = currentMonthList.filter((item) => item.type === 'pay').reduce((a, c) => a + c.money, 0)
    const income = currentMonthList.filter((item) => item.type === 'income').reduce((a, c) => a + c.money, 0)
    return {
      pay,
      income,
      total: pay + income
    }
  }, [currentMonthList])

  // 一打开页面即开始计算
  useEffect(() => {
    // 如果不传数据就是默认的当前时间
    const nowDate = dayjs().format('YYYY-MM')
    if (monthGroup[nowDate]) {
      setCurrentMonthList(monthGroup[nowDate])
    } else {
      setCurrentMonthList([])
    }
  }, [monthGroup])

  // 当前月按照日来分组获取数据
  const dayGroup = useMemo(() => {
    const groupDate = _.groupBy(currentMonthList, (item) => dayjs(item.date).format('YYYY-MM-DD'))
    const keys = Object.keys(groupDate)
    return {
      groupDate,
      keys
    }
  }, [currentMonthList])


  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={ false }>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */ }
          <div className="date" onClick={ () => setDateVisible(true) }>
            <span className="text">
              { currentDate + '' }月账单
            </span>

            {/* 
            箭头切换 
            arrow一直常驻
            expand打开的时候才有
            */ }
            <span className={ classNames('arrow', dateVisible && 'expand') }></span>
          </div>
          {/* 统计区域 */ }
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{ monthResult.pay }</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{ monthResult.income }</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{ monthResult.total }</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */ }
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={ dateVisible }
            max={ new Date() }
            onCancel={ () => setDateVisible(false) }
            onConfirm={ onConfirm }
            onClose={ () => setDateVisible(false) }
          />
        </div>

        {/* 单日列表统计 */ }
        {
          dayGroup.keys.map((key) => <DailyBill key={key} date={key} billList={dayGroup.groupDate[key]} />)
        }
      </div>
    </div >
  )
}
